<template>
  <div class="app-container">

    <CustomContent>
      <template v-slot:body>
        <div id="mmv-page" v-loading="loading">
          <MmvTitle title="方案信息"></MmvTitle>
          <el-form size="mini" label-width="130px" ref="form">

            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="方案名称:" required>
                  {{charteredBusPlanName}}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="车型:" required>
                  {{modelInfo}}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="所属门店:" required>
                  {{storeName}}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="15">
              <el-col :span="8">
                <el-form-item label="用车时间类型:" required>
                  <dict-tag :options="dict.type.use_time_type" :value="useTimeType"/>
                </el-form-item>
              </el-col>
            </el-row>

            <template v-if="useTimeType==2">
              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="公里数(KM):" required>
                    {{kilometers}}km
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="用车时间:" required>
                    {{setUseTimes}}小时
                  </el-form-item>
                </el-col>
              </el-row>
            </template>


            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="车辆押金:" prop="deposit">
                  {{deposit}}元
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="车辆租金:" prop="deposit">
                  {{rent}}元
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>


          <MmvTitle title="其他收费项"></MmvTitle>
          <el-row :gutter="15">
            <el-col :span="24">
              <el-table :data="feeItemList" border ref="itemTable" >
                <el-table-column label="收费项名称" align="center" prop="feeItemName" min-width="120" show-overflow-tooltip />
                <el-table-column label="收费项说明" align="center" prop="remark" min-width="120" show-overflow-tooltip />
                <el-table-column label="价格" align="center" prop="unitPrice">
                  <template slot-scope="{ row }">
                    {{row.feeItemValue}} 元/<dict-tag style="display: inline-block" :options="dict.type.charge_type" :value="row.chargeItemsType"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>

        </div>
      </template>
      <template v-slot:footer>
        <div class="footer">
          <el-button type="info" plain @click.native="close">关闭</el-button>
        </div>
      </template>
    </CustomContent>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import * as planApi from "@/api/plan/plan";
import * as charteredBusPlanApi from "@/api/charteredBus/priceSetting";
import forEach from 'lodash/forEach';
import MmvTable from './components/mmv-table.vue'
import * as Utils from '@/utils'
import {tenantlist} from "@/api";
import CustomContent from "@/components/custom/content";

export default {
  components: {
    MmvTitle,
    MmvTable,
    CustomContent,
  },
  dicts: [
    'car_status',
    'charge_type',
    'use_time_type',
  ],
  data() {
    return {
      modelList: [],
      // 总条数
      total: 0,
      drawerFlag: false,
      retract: false,
      addPlanLoading: false,
      direction: 'rtl',
      tenantId: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        modelId: null,
        carNo: null,
      },
      modeltotal: 0,
      modelloading: false,
      deposit: 0,
      rent: 0, // 租金
      //
      prevEdit: null,
      nowPrice: 0,
      nowEdit: null,
      loading: false,
      showchexing: false,
      title: '',
      planName: '', // 车价名称
      //
      configurationId: '', // 品牌车系车型
      modelId: '',
      modelName: '',
      modelInfo: '',
      storeName: '',
      kilometers:'',
      useTimeTypeStr:'',
      useTimeType:null,
      setUseTimes:null,
      charteredBusPlanName:'',
      modelConfig: [],
      //
      label: [],
      operatingClassification: "",
      // 是否显示弹出层
      open: false,
      openkehu: false, // 客户选择弹窗
      value: new Date(),
      list: [{
        mondayPrice: 0,
        tuesdayPrice: 0,
        wednesdayPrice: 0,
        thursdayPrice: 0,
        fridayPrice: 0,
        saturdayPrice: 0,
        sundayPrice: 0,
      }],
      checktable: [{}],
      checktableindex: 0,
      checklistteshutable: [{}],
      checklistteshutableindex: 0,
      radio: 0,
      chargeInsureList: [], // 保险项
      selectInsureIds: [], // 保险项ids
      feeItemList: [], // 收费项
      selectItemsIds: [], // 收费项ids
      configurationList: [], // 车型业务配置列表
      configurationquery: {
        pageNum: 1,
        pageSize: 10,
        modelName: null,
        configurationId: null
      },
      tenantConfig: {
        illegalDeposit: 0,
        pageSinightServiceFeeze: 2,
        nightServiceFeeStart: null,
        nightServiceFeeEnd: null,
        nightServiceFeePrice: null,
        nightServiceFeeRemark: null
      },
    }
  }, computed: {
    isEdit() {
      return !!this.form.charteredBusPlanId;
    },
    rilijiage() {
      return {
        0: this.list[0].sundayPrice,
        1: this.list[0].mondayPrice,
        2: this.list[0].tuesdayPrice,
        3: this.list[0].wednesdayPrice,
        4: this.list[0].thursdayPrice,
        5: this.list[0].fridayPrice,
        6: this.list[0].saturdayPrice,
      }
    },
  },
  watch: {
  },
  async mounted() {
    this.loading = true;
    await this.getTenantConfig(); // 获取租户配置
    this.loading = false;
    this.charteredBusPlanId = this.$route.query.charteredBusPlanId;
    this.storeName = this.$route.query.storeName;
    if (this.charteredBusPlanId) {
      console.log('走修改流程 ');
      await this.getData();
    }
  },
  methods: {

    /** 获取租户配置 */
    async getTenantConfig() {
      const result = await planApi.getTenantConfig();
      this.tenantConfig = result.data;
    },

    close() {
      // 关闭页面
      this.$router.go(-1)
      this.$store.dispatch('tagsView/delView', this.$route)
    },
    async getData() {
      console.log("进来的计划好：",this.charteredBusPlanId)
      this.loading = true;
      await charteredBusPlanApi.getInfo(this.charteredBusPlanId).then(response => {
        this.configurationId = response.data.configurationId;
        this.operatingClassification = response.data.operatingClassification;
        this.modelId = response.data.modelId;
        this.modelConfig = String(response.data.modelConfig).split(',');
        this.deposit = response.data.deposit;
        this.modelInfo = response.data.modelInfo;
        this.rent = response.data.rent;
        this.kilometers =  response.data.kilometers;
        if(response.data.useTimeType != null){
          if(response.data.useTimeType == 1){
            this.useTimeTypeStr = '按天';
          }else {
            this.useTimeTypeStr = '按小时';
          }
        }
        this.charteredBusPlanName = response.data.charteredBusPlanName;
        this.tenantId = response.data.tenantId;
        this.modelName = response.data.modelName
        this.feeItemList = response.data.charteredBusItemsBillingList;
        this.useTimeType = response.data.useTimeType;
        this.setUseTimes = response.data.setUseTimes;
        this.loading = false;
      });

    },
    /** */
  },
}
</script>

<style>
#mmv-page .next {
  background: #f5f5f5;
}

#mmv-page .prev {
  background: #f5f5f5;
}

#mmv-page .el-calendar-day {
  padding: 0;
}

#mmv-page .next .rili-price-wrap {
  display: flex;
  align-items: center;
  padding: 5px 5px 0;
  color: #999;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}
</style>

<style lang="scss" scoped>
#mmv-page {

::v-deep .el-calendar-table .el-calendar-day {
  height: 60px;
}

}
.rili {
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.rili-wrap {
  position: relative;
}

.el-icon-refresh-left {
  position: absolute;
  top: 8px;
  right: 8px;
}

.aaaaaa {
  background: rgb(253, 226, 226);
}

.rili-day {
  color: #999;
}

.rili-price-wrap {
  display: flex;
  align-items: center;
  padding: 5px 5px 0;
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  justify-content: center;
  white-space: nowrap;

}
</style>
